import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import { withStyles } from 'material-ui/styles'

import iconStyle from './style'

const CategoryIcon = (props) => {
  const { Icon } = props
  const inconClass = props.active ? props.classes.iconBtnActive : props.classes.iconBtnDefault
  return (
    <Link className={inconClass} to={props.url}>
      <div className={props.classes.icon}><Icon className={props.classes.icon} /></div>
      <span className={props.classes.iconTitle}>{props.title}</span>
    </Link>
  )
}
export default withStyles(iconStyle)(CategoryIcon)

CategoryIcon.propTypes = {
  Icon: PropTypes.element,
  title: PropTypes.string,
  url: PropTypes.string,
  active: PropTypes.bool,
}
CategoryIcon.propTypes = {
  classes: PropTypes.objectOf(Object),
}
